<script lang="ts" setup>
import { ref } from "vue";
import { useFriendChain } from "~/api/public";

const FriendChainItem = defineAsyncComponent(
  () => import("~/components/FriendChainItem.vue")
);
const { data } = await useFriendChain();
const show = ref(false);
</script>

<template>
  <FriendChainItem v-model:show="show"></FriendChainItem>
  <div class="linkBody">
    <h1>友链</h1>
    <template v-for="item in data?.data">
      <var-link
        :href="item.link"
        target="_blank"
        underline="none"
      >
        <var-chip
          type="primary"
          :style="{
            cursor: 'pointer',
          }"
          >{{ item.name }}</var-chip
        >
      </var-link>
    </template>
    <var-chip
      type="default"
      :style="{
        cursor: 'pointer',
      }"
      @click="show = true"
      >申请友链</var-chip
    >
  </div>
</template>

<style lang="less" scoped>
.linkBody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
</style>
